<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        // <!-- 一、cookie -->
        //     <!-- 1.cookie:是html4版本用于存储用户信息的一种方式 -->
        //     <!-- 2.cookie的作用：用于解决如何记录客户端的用户信息；
        //     当用于访问web页面时，他的名字可以记录在cookie中，在用户下一次访问该页面时，可以在cookie中读取用户的访问记录 -->

        // 3.创建cookie 
        document.cookie="user=123";
        document.cookie="password=666";
        document.cookie="test=xyz";
        document.cookie="username=John Doe; expires=Thu, 18 Dec 2004 12:00:00 GMT";
        
        // 注意：在浏览器中查看创建好的cookie，需要以启服务的方式在浏览器中打开网页（open width live server）
        //      开发者模式=>Application=>Cookies
        // 4.修改cookie
        document.cookie="user=456";
        // 5.获取cookie
        let x=document.cookie;
        console.log(x);//password=666; test=xyz; user=456
        // 字符串转数组（.../split）
        let arr=x.split("; ");
        console.log(arr);// ['password=666', 'test=xyz', 'user=456']
        let obj={};
        for(let i=0;i<arr.length;i++){
            let index=arr[i].indexOf("=");
            let objName=arr[i].slice(0,index);
            let objValue=arr[i].slice(index+1);
            obj[objName]=objValue;
        }
        console.log(obj);
        // // 6.删除cookie,需要添加一个过期时间
        document.cookie="password=666;expires=Thu, 18 Dec 2004 12:00:00 GMT"

        // 7.cookie的优点
        // （1）简单易上手
        // （2）浏览器自动管理不同站点的cookie

        // 8.cookie的缺点
        // （1）安全性不高
        // (2)存储数据容量低，不能存储超过4KB，浏览器存储数量在30-50之间
        // （3）效率较低





        // let obj={
        //     password:666,
        //     user:456
        // }



        // 二、web Stroage
        // (一)localStorage：永久性本地储存数据
        // (二)sessionStorage：会话时间（打开浏览器，浏览网页期间）存储数据，会话结束之后，数据自动删除

        // 注意：localStorage和sessionStorage用法完全相同，只是存储数据的时间不同

        // 优点：1.简单方便 2.存储数据容量大 3.能够存储的数据多种多样，功能丰富


        // 1.创建localStorage
        localStorage.setItem("name","小米");
        localStorage.age=18;

        // 2.获取localStorage
        console.log(localStorage.getItem("name"));
        console.log(localStorage.age);

        // 3.修改localStorage
        localStorage.setItem("name","小红");
        localStorage.age=99;

        // 4.删除localStorage
        localStorage.removeItem("name");
        delete localStorage.age;

        // 5.清空所有localStorage
        localStorage.clear();


        let person={
            name:"张三",
            age:18
        }

        // 把对象转成字符串
        let str=JSON.stringify(person);
        console.log(str)

        localStorage.person=str;
        let s=localStorage.person;
        // 把字符串转成对象
        console.log(JSON.parse(s));






    </script>



</body>

</html>